<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>//demo/5.ajax.html</title>
    <script src="../js/wfQuery.js?debug=&_t=1420114760783"></script>
	<!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> -->
    <style>
    pre.code{background: #d2d2d2;padding: 4px;}
    </style>
</head>
<body>
<a href="../index.html">返回首页</a>

<h2>ajax支持</h2>
<style>
#form0 .inner{width: 720px;margin: 0 auto;}
#form0 .center{text-align: center;}
#form0 .rt{text-align: right;}
#form0 .tip{display: inline-block; padding-left: 10px; width: 240px;font-size: 12px;}
#form0 .tip-error{color: red;}
</style>

<form action="#" id="form0">
    <div class="inner">
        <table>
            <tr>
                <td class="center" colspan="2">
                    <h3>会员注册</h3> 
                </td>
            </tr>
            <tr>
                <th class="rt">登录昵称：</th>
                <td><input type="text" id="name" name="name" value="shy2850"><span class="tip">*</span></td>
            </tr>
            <tr>
                <th class="rt">姓名：</th>
                <td><input type="text" id="user_name" name="user_name" value="云香水识"><span class="tip">*</span></td>
            </tr>
            <tr>
                <th class="rt">密码：</th>
                <td><input type="password" id="pass0" name="pass0"><span class="tip">*</span></td>
            </tr>
            <tr>
                <th class="rt">确认密码：</th>
                <td><input type="password" id="pass1" name="pass1"><span class="tip">*</span></td>
            </tr>
            <tr>
                <th class="rt">Email：</th>
                <td><input type="email" id="email" value="" name="email" disabled ><span class="tip">*</span></td>
            </tr>
            <tr>
                <th class="rt">QQ：</th>
                <td><input type="text" id="qq" name="qq"  value="80704186"><span class="tip">*</span></td>
            </tr>
            <tr>
                <th class="rt">性别：</th>
                <td>
                    <input type="radio" name="sex" id="sex1" value="1"><label for="sex1">男</label>
                     
                    <input type="radio" name="sex" id="sex2" value="2"><label for="sex2">女</label>
                    <span class="tip">*</span>
                </td>
            </tr>
            <tr>
                <th class="rt">照片：</th>
                <td>
                    <input type="file" name="img" id="img">
                    <span class="tip">*</span>
                </td>
            </tr>
            <tr>
                <th class="rt">个人简介：</th>
                <td>
                    <textarea name="info" id="info" cols="30" rows="5" placeholder="快来介绍一下自己吧！"></textarea><span class="tip">*</span>
                </td>
            </tr>
            <tr>
                <td class="center" colspan="2">
                    <input type="submit" value="注册">
                     
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </div>  
</form>

<style>/*

Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>

*/

pre code {
  display: block; padding: 0.5em;
  background: #F0F0F0;
}

pre code,
pre .ruby .subst,
pre .tag .title,
pre .lisp .title {
  color: black;
}

pre .string,
pre .title,
pre .constant,
pre .parent,
pre .tag .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .instancevar,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .tex .special,
pre .erlang_repl .function_or_atom {
  color: #800;
}

pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk {
  color: #888;
}

pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .go .constant,
pre .change {
  color: #080;
}

pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .important,
pre .pseudo,
pre .pi,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula,
pre .erlang_repl .reserved,
pre .input_number {
  color: #88F
}

pre .css .tag,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag {
  font-weight: bold;
}

pre .keyword,
pre .id,
pre .phpdoc,
pre .title,
pre .built_in,
pre .aggregate,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .go .typename,
pre .tex .command {
  font-weight: bold;
}

pre .nginx .built_in {
  font-weight: normal;
}

pre .xml .css,
pre .xml .javascript,
pre .xml .vbscript,
pre .tex .formula {
  opacity: 0.5;
}
</style><pre class="code">
<span class="comment">/*该方法执行f2e-server指定服务器支持*/</span>
$.jsonp(<span class="string">'data/jsonp.js'</span>,{a:<span class="number">3</span>},<span class="keyword">function</span>(d){
    console.log(d);
});

$.ajax({
    url: <span class="string">"data/note.xml"</span>,
    dataType: <span class="string">"xml"</span>,
    cache: <span class="keyword">false</span>,
    success: <span class="keyword">function</span>(xml){
        console.log( $( xml ).children().children() );
    }
});

$(<span class="string">"#form0"</span>).on(<span class="string">"submit"</span>,<span class="keyword">function</span>(e){
    <span class="comment">/*该方法执行需要f2e-server服务器支持*/</span>
    $.ajax({
        url: <span class="string">"/upload?target=demo/data/upload.json&amp;uploadUrl=demo/data/"</span>,
        type: <span class="string">"post"</span>,
        form: <span class="keyword">this</span>,
        success: <span class="keyword">function</span>( json ){
            console.log( json );
        },
        error: <span class="keyword">function</span>(xhr){
            alert( <span class="string">'wrong'</span> )
        }
    });
    e.preventDefault();
});



</pre><script class="code">
/*该方法执行f2e-server指定服务器支持*/
$.jsonp('data/jsonp.js',{a:3},function(d){
    console.log(d);
});

$.ajax({
    url: "data/note.xml",
    dataType: "xml",
    cache: false,
    success: function(xml){
        console.log( $( xml ).children().children() );
    }
});

$("#form0").on("submit",function(e){
    /*该方法执行需要f2e-server服务器支持*/
    $.ajax({
        url: "/upload?target=demo/data/upload.json&uploadUrl=demo/data/",
        type: "post",
        form: this,
        success: function( json ){
            console.log( json );
        },
        error: function(xhr){
            alert( 'wrong' )
        }
    });
    e.preventDefault();
});



</script>

<a href="https://github.com/shy2850/wfQuery.git" target="_"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
</body>
</html>
